<template>
    <div id="new-china-page">
      <!-- 导航栏 -->
      <header>
        <h1>新中国成立经过</h1>
    </header>
      <nav class="navbar">
        <ul>
          <li><a href="/">主页</a></li>
            <li><a href="/home2">首页</a></li>
        <li><a href="/prelude">新中国成立前奏</a></li>
        <li><a href="/significance">新中国成立意义</a></li>
        </ul>
      </nav>

      <!-- 操作按钮 -->
      <div class="operation-btn">
        <button @click="showModal = true">操作时间轴</button>
        <select v-model="selectedOperation">
          <option value="add">增加事件</option>
          <option value="edit">修改事件</option>
          <option value="delete">删除事件</option>
        </select>
      </div>

      <!-- 模态框 -->
      <transition name="modal">
        <div class="modal" v-if="showModal">
          <div class="modal-content">
            <span class="close" @click="closeModal">&times;</span>
            <div v-if="selectedOperation === 'add'">
              <h3 class="modal-title">添加新事件</h3>
              <div class="input-group">
                <label for="add-title">标题：</label>
                <input type="text" id="add-title" v-model="newEvent.title" placeholder="请输入事件标题" />
              </div>
              <div class="input-group">
                <label for="add-date">时间：</label>
                <input type="text" id="add-date" v-model="newEvent.date" placeholder="请输入事件时间" />
              </div>
              <div class="input-group">
                <label for="add-content">内容：</label>
                <textarea id="add-content" v-model="newEvent.content" placeholder="请输入事件内容"></textarea>
              </div>
              <button class="modal-button" @click="addEvent">添加事件</button>
            </div>
            <div v-if="selectedOperation === 'edit'">
              <h3 class="modal-title">修改事件</h3>
              <select v-model="editEventIndex">
                <option v-for="(event, index) in timelineEvents" :value="index">{{ event.title }}</option>
              </select>
              <div class="input-group">
                <label for="edit-title">标题：</label>
                <input type="text" id="edit-title" v-model="editEvent.title" placeholder="请输入新标题" />
              </div>
              <div class="input-group">
                <label for="edit-date">时间：</label>
                <input type="text" id="edit-date" v-model="editEvent.date" placeholder="请输入新时间" />
              </div>
              <div class="input-group">
                <label for="edit-content">内容：</label>
                <textarea id="edit-content" v-model="editEvent.content" placeholder="请输入新内容"></textarea>
              </div>
              <button class="modal-button" @click="editSelectedEvent">修改事件</button>
            </div>
            <div v-if="selectedOperation === 'delete'">
              <h3 class="modal-title">删除事件</h3>
              <select v-model="deleteEventIndex">
                <option v-for="(event, index) in timelineEvents" :value="index">{{ event.title }}</option>
              </select>
              <button class="modal-button" @click="deleteSelectedEvent">删除事件</button>
            </div>
          </div>
        </div>
      </transition>

      <!-- 新中国成立经过时间轴 -->
      <div id="new-china-timeline">
        <h2>新中国成立经过时间轴</h2>
        <div class="timeline">
          <div class="timeline-event" v-for="(event, index) in sortedTimelineEvents" :key="index">
            <div class="timeline-date">{{ event.date }}</div>
            <div class="t ime-line-content" >
              <h3>{{ event.title }}</h3>
              <p>{{ event.content }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 新中国成立意义 -->
      <div id="new-china-significance">
        <h2>新中国成立意义</h2>
        <p>这里将详细阐述新中国成立的伟大意义，待后续补充内容......</p>
      </div>
    </div>
  </template>

  <script>
import Sidebar from './Sidebar.vue';
  export default {
    name: 'NewChinaPage',
    components: {  
    Sidebar 
  }, 
    data() {
      return {
        showModal: false,
        selectedOperation: 'add',
        newEvent: {
          title: '',
          date: '',
          content: ''
        },
        editEventIndex: null,
        editEvent: {
          title: '',
          date: '',
          content: ''
        },
        deleteEventIndex: null,
        timelineEvents: [
          {
            title: '七届二中全会召开',
            date: '1949年3月',
            content: '在中国革命即将取得全国胜利的前夕，中国共产党在西柏坡召开了七届二中全会。毛泽东在会议上提出了促进革命迅速取得全国胜利和组织这个胜利的各项方针；说明了在全国胜利的局面下，党的工作重心必须由乡村转移到城市，城市工作必须以生产建设为中心；规定了党在全国胜利后，在政治、经济、外交方面应当采取的基本政策，以及使中国由农业国转变为工业国、在新民主主义社会转变为社会主义社会的总任务和主要途径。此次会议为党的工作重心转移等做了充分准备。'
          },
          {
            title: '“五一口号”发布',
            date: '1948年4月30日',
            content: '中共中央发布“五一口号”，号召“各民主党派、各人民团体、各社会贤达迅速召开政治协商会议，讨论并实现召集人民代表大会，成立民主联合政府”。这一号召得到各民主党派、无党派民主人士的热烈响应，他们纷纷奔赴解放区，与中国共产党共商建国大计。标志着各民主党派和无党派民主人士公开、自觉地接受中国共产党的领导，是多党合作和政治协商制度形成的重要里程碑。'
          },
          {
            title: '人民解放军占领南京',
            date: '1949年4月24日',
            content: '凌晨，人民解放军占领南京总统府，宣告了延续22年的国民党反动形式的覆灭。这一事件标志着中国新民主主义革命取得了基本胜利，为新中国的成立奠定了坚实基础，极大地鼓舞了全国人民的革命斗志，让新中国的诞生更加可期。'
          },
          {
            title: '中国人民政治协商会议筹备',
            date: '随着解放战争的基本胜利',
            content: '建立新中国的各项筹备工作紧锣密鼓地展开。众多民主人士汇聚，共同商讨新中国成立的各项事宜，包括制定相关纲领、确定政府架构等，为中国人民政治协商会议第一届全体会议的顺利召开奠定了基础，是新中国成立筹备过程中的重要环节。'
          },
          {
            title: '公安部队加强北平安保',
            date: '在开国大典临近之际',
            content: '蒋介石集团妄图破坏。北平公安部门高度警觉，加强安保工作。公安人员通过细致侦查，如发现异常的烟头、皮鞋印等线索，成功破获特务阴谋，抓获多名特务，有力保障了开国大典的安全举行，凸显了当时安保工作的重要性和公安人员的英勇。'
          },
          {
            title: '人民空军筹建起步',
            date: '1949年初',
            content: '建立人民空军被提上日程。3月成立军委航空局，开展接收相关设备、人员等工作。8月赴莫斯科商谈合作事宜并签订协议，9月飞行队成立并担负防空等任务。人民空军的筹建为新中国国防建设奠定了重要基础，开启了我国空军发展的征程。'
          }
        ]
      };
    },
    computed: {
      sortedTimelineEvents() {
        return this.timelineEvents.slice().sort((a, b) => {
          return a.date.localeCompare(b.date);
        });
      }
    },
    methods: {
      closeModal() {
        this.showModal = false;
        this.resetEditAndDeleteStates();
      },
      addEvent() {
        this.timelineEvents.push(this.newEvent);
        this.showModal = false;
        this.resetNewEvent();
      },
      editSelectedEvent() {
        const index = this.editEventIndex;
        this.timelineEvents[index] = {
        ...this.timelineEvents[index],
          title: this.editEvent.title,
          date: this.editEvent.date,
          content: this.editEvent.content
        };
        this.showModal = false;
        this.resetEditAndDeleteStates();
      },
      deleteSelectedEvent() {
        const index = this.deleteEventIndex;
        this.timelineEvents.splice(index, 1);
        this.showModal = false;
        this.resetEditAndDeleteStates();
      },
      resetNewEvent() {
        this.newEvent = {
          title: '',
          date: '',
          content: ''
        };
      },
      resetEditAndDeleteStates() {
        this.editEventIndex = null;
        this.editEvent = {
          title: '',
          date: '',
          content: ''
        };
        this.deleteEventIndex = null;
      }
    }
  };
  </script>
<style scoped>
@import url('../CSS/main.css');
</style>
  <style scoped>
  /* 整体页面容器样式 */
  body {
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 头部样式 */
header {
  background-color: #c00; /* 红色背景 */
  color: white;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

header h1 {
  margin: 0;
  font-size: 36px;
  text-transform: uppercase;
}
/* 导航栏样式 */
nav {
  background-color: #a00; /* 稍暗一些的红色背景 */
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav ul li {
  display: inline;
  margin-right: 20px;
}

nav ul li a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  padding: 5px 10px;
  border-radius: 3px;
  transition: background-color 0.3s ease;
}

nav ul li a:hover {
  background-color: #800; /* 更暗一些的红色背景，鼠标悬停效果 */
}
header, nav, main, footer {
  margin: 20px 0;
}
/* 操作按钮样式 */
.operation-btn button {
    padding: 12px 24px;
    background-color: #007BFF; /* 蓝色背景，可根据喜好调整颜色值 */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.operation-btn button:hover {
    background-color: #0056b3; /* 鼠标悬停时加深的蓝色，营造交互效果 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.operation-btn select {
    padding: 10px;
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.operation-btn select:hover {
    border-color: #999;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 模态框内按钮样式 */
.modal-button {
    padding: 12px 24px;
    background-color: #28a745; /* 绿色背景，可根据具体情境选择合适颜色，如这里表示确认操作的积极颜色 */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.modal-button:hover {
    background-color: #218838; /* 鼠标悬停时加深的绿色 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 模态框关闭按钮样式 */
.close {
    float: right;
    cursor: pointer;
    font-size: 24px;
    color: #999;
    margin-top: -10px;
    margin-right: -10px;
    z-index: 10001;
    transition: color 0.3s ease;
}

.close:hover {
    color: #666;
}

/* 时间轴相关样式，与之前类似，部分样式可能需要根据实际情况微调 */
#new-china-timeline {
    margin-top: 20px;
}

.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline-event {
    position: relative;
    margin-bottom: 30px;
    color: black;
}

.timeline-date {
    position: absolute;
    left: -150px;
    top: 0;
    width: 120px;
    text-align: right;
    font-weight: bold;
    color: black;
}

.timeline-content {
    background-color: white;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    color: black;
}

.timeline-content h3 {
    margin-top: 0;
    color: black;
}

.timeline-content p {
    margin-bottom: 0;
    line-height: 1.5;
    color:black;
}
main p {
  line-height: 1.6;
  font-size: 16px;
  color: black;
  max-width: 800px;
}
/* 新中国成立意义部分样式 */
#new-china-significance {
    margin-top: 20px;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

#new-china-significance h2 {
    color: black;
}
  </style>